<template>
  <div>
    <Header :left="true" leftText="返回" title="集货处理操作界面" />
    <div>
      <!-- 标签 -->
      <van-row style="margin-top: 15px">
        <van-col
          ><van-image
            width="40"
            height="30"
            style="margin-left: -10px"
            src="assets/block.png"
        /></van-col>
        <van-col class="message">集货明细信息</van-col>
      </van-row>
    </div>
    <!-- 分割线 -->
    <div style="background-color: #f5f5f5; height: 5px"><span></span></div>
    <!-- 数据信息 -->
    <div class="divMessage">
      <Field
        v-model="form.deliverydatetime"
        :readonly="true"
        size="large"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="发货日期"
      />
      <Field
        v-model="form.customername"
        :readonly="true"
        size="large"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="客户名称"
      />
      <Field
        v-model="form.productionname"
        :readonly="true"
        size="large"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="产品名称"
      />
      <Field
        v-model="form.deliveryindex"
        :readonly="true"
        size="large"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="发货顺序"
      />
      <Field
        v-model="form.plancollectiondatetime"
        :readonly="true"
        size="large"
        style="
          font-weight: bold;
          color: #a9a9a9;
          height: 40px;
          white-space: nowrap;
        "
        center
        colon
        label="计划集货时间"
      />
      <van-popover
        placement="top"
        class="buttonStart"
        v-model="showPopover"
        trigger="click"
        :actions="actions"
        @select="onSelect"
      >
        <template #reference>
          <van-button
            color="#f58220"
            :block="true"
            class="buttonStart"
            type="warning"
            text="延迟处理"
            >延迟处理</van-button
          >
        </template>
      </van-popover>
    </div>
    <!-- 底部按钮 -->
    <!-- <van-button
      color="#f58220"
      :block="true"
      @click="repairNoPass"
      class="buttonStart"
      type="warning"
      text="延迟处理"
    /> -->
    <van-button
      :block="true"
      @click="repairPass"
      class="buttonMiddle"
      type="danger"
      color="#d71345"
      text="回复"
    />
    <van-button
      :block="true"
      @click="repairOKPass"
      class="buttonEnd"
      type="primary"
      color="#138087"
      text="确认完成"
    />
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Loading,
  tab,
  Uploader,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  popup,
  Picker,
  Popover,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(Picker);
Vue.use(popup);
Vue.use(Uploader);
Vue.use(Loading);
Vue.use(Toast);
Vue.use(Popover);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
  components: {
    Popover,
    Toast,
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
    Picker,
  },

  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "30分钟" }, { text: "45分钟" }, { text: "60分钟" }],
      id: "",
      btnLoading: false,
      winName: "", //窗口名
      user: [], //当前登录用户
      //多媒体文件
      photoList: [
        //图片
      ],
      pictureNum: 0, //照片数量
      playing: "播放中...", //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      photoShow: false, //照片显示控制
      vedioShow: false, //视频显示控制
      audioShow: false, //语音显示控制
      vedioList: [], //视频
      audioPath: "", //语音
      sourceShowPicker: false,
      allSelected: false,
      selectFont: "一键勾选",
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: "",
      form: {
        deliverydatetime: "", //发货日期
        customername: "", //客户名称
        productionname: "", //产品名称
        deliveryindex: "", //发货顺序
        plancollectiondatetime: "", //计划集货时间
      },
      columns: [{ fault_key: "1", fault_value: "机械故障" }],
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;

    this.user = JSON.parse(storage.get("user"));

    let tkn = getToken();
    if (!tkn) {
      api.openWin({
        name: "login",
        url: "./login-login.html",
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    }
    //页面赋值
    this.id = api.pageParam.id;
    // alert(this.form.id)
    //初始化查询多媒体信息
    this.queryFileById();
  },
  methods: {
    onSelect(action) {
      //alert(action)
      //Toast(action.text);
      this.repairNoPass(action.text);
    },
    //视频播放
    playVedio(filePath) {
      let that = this;
      if (api.deviceName.toLowerCase() == "vivo" || api.deviceName.toLowerCase() == "oppo" || api.deviceName.toLowerCase() == "honor") {
        var videoPlayer = api.require("videoPlayer");
        videoPlayer.play(
          {
            path: filePath.trim(),
            autoPlay: true
          },
          function (ret, err) {

          }
        );
      } else {
        that.$ac.openVideo({
          url: filePath.trim(),
        });
      }
    },

    //语音播放
    playArm() {
      //判断是播放还是暂停
      if (!this.audioLoad) {
        this.audioLoad = true;
        this.audioStop = false;
        if (this.audioPath == "") {
          Dialog.alert({
            message: "当前无语音信息",
              theme: 'round-button',
          }).then(() => {
            // on close
          });
        }
        var audioStreamer = api.require("audioStreamer");
        let _this = this;
        audioStreamer.addEventListener({}, function (ret) {
          if (ret.state == "finished") {
            _this.audioLoad = false;
            _this.audioStop = true;
          }
        });
        audioStreamer.openPlayer(
          {
            path: _this.audioPath,
          },
          function (ret) {
            // if (ret.status) {
            //   api.alert({ msg: JSON.stringify(ret) })
            // }
          }
        );
      } else {
        var audioStreamer = api.require("audioStreamer");
        audioStreamer.pause();
        this.audioLoad = false;
        this.audioStop = true;
      }
    },
    //延迟处理
    repairNoPass(value) {
      let _this = this;
      Dialog.confirm({
        title: "提示",
        message: "是否确认当前集货操作延迟" + value + "处理?",
          theme: 'round-button',
      })
        .then(() => {
          //alert(value.substring(0,2));
          //点击确定，继续执行后续操作
          this.repairNoPassExecute(value.substring(0, 2));
        })
        .catch(() => {});
    },

    //填写单据
    repairPass() {
      let _this = this;
      api.openWin({
        name: "logistics-abnormaldocuments",
        url: "./logistics-abnormaldocuments.html",
        pageParam: {
          id: _this.id,
          type: "1",
        },
        reload: true,
      });
    },
    //确认完成
    async repairOKPass() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "确认中...",
      });
      let _this = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/logistics/ProductionDeliveryPlan/sureshippingconfirmation",
          {
            body: {
              id: _this.id,
              collectionoperator: _this.user.userId,
            },
          }
        );
        if (res.code === 200) {
          Toast.clear();
          Toast.success("确认成功");
          api.openWin({
            name: "logistics-shippingconfirmation",
            url: "./logistics-shippingconfirmation.html",
            reload: true,
          });
          //this.queryWaitAssignList();
        } else {
          Toast.success(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
      }
    },
    //未维修好，执行
    async repairNoPassExecute(value) {
      let _this = this;
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/logistics/ProductionDeliveryPlan/delaysinprocessing",
          {
            body: {
              id: _this.id,
              factoryid: _this.user.site,
              delaytime: value,
              type: "1",
            },
          }
        );
        if (res.code === 200) {
          api.openWin({
            name: "logistics-shippingconfirmation",
            url: "./logistics-shippingconfirmation.html",
            reload: true,
          });
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },

    //维修好，执行
    async repairPassExecute() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/repair/repairInfo/updateRepairCheckStatus",
          {
            body: { id: _this.form.id, status: "5" },
          }
        );
        if (res.code === 200) {
          Toast.clear();
          Dialog.alert({
            message: res.msg,
              theme: 'round-button',
          }).then(() => {});

          _this.form.status = "5";
          //维修完成，关闭当前页面
          api.sendEvent({
            name: "result",
            extra: {
              item: _this.form,
            },
          });
          api.closeWin();
        } else {
          Toast.clear();
          Dialog.alert({
            message: res.msg,
              theme: 'round-button',
          }).then(() => {});
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },
    //查询集货确认明细
    async queryFileById() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/logistics/ProductionDeliveryPlan/selectbyid",
          {
            body: { id: _this.id },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          if (res.rows.length > 0) {
            _this.form.deliverydatetime = res.rows[0].deliverydatetime;
            _this.form.customername = res.rows[0].customername;
            _this.form.productionname = res.rows[0].productionname;
            _this.form.deliveryindex = res.rows[0].deliveryindex;
            _this.form.plancollectiondatetime =
              res.rows[0].plancollectiondatetime;
          }
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.clear();
        alert(JSON.stringify(e));
      }
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 85px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonStart {
  position: fixed;
  bottom: 20px;
  left: 10px;
  width: 25%;
  height: 50px;
  font-size: 14px;
}
.buttonMiddle {
  position: fixed;
  bottom: 20px;
  width: 25%;
  left: 130px;
  height: 50px;
  font-size: 14px;
}

.buttonEnd {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 25%;
  height: 50px;
  font-size: 14px;
}
.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.divMedia {
  margin-top: 0px;
  height: 230px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.divMessage {
  margin-top: 0px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
</style>
